<html lang="en">
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<link rel="stylesheet" class="ui" href="/static/css/semantic.min.css"/>
    <link rel="stylesheet" class="ui" href="/static/css/body.css"/>
    <link rel="stylesheet" class="ui" href="/static/css/chat.css"/>
	<script type="text/javascript">

		function vaildateForm() {
			var username = document.forms["registerForm"]["username"].value;
			var password = document.forms["registerForm"]["password"].value;
			var rep_password = document.forms["registerForm"]["rep_password"].value;
			//var email = document.forms["registerForm"]["email"].value;
			//var phone = document.forms["registerForm"]["phone"].value;
			if (username == null || username == ""){
				alert("用户名不能为空");
				return false;
			}
			var reg_filter=/^s*[.A-Za-z0-9_-]{3,15}s*$/;
			if (!reg_filter.test(username)){
				alert("用户名填写不正确,请重新填写！可使用的字符为（A-Z a-z 0-9 _ - .)长度不小于3个字符，不超过15个字符，注意不要使用空格");
				return false;
			}
			if (password == null || password == ""){
				alert("密码不能为空");
				return false;
			}
			if (!reg_filter.test(password)){
				alert("密码填写不正确,请重新填写！可使用的字符为（A-Z a-z 0-9 _ - .)长度不小于4个字符，不超过15个字符，注意不要使用空格");
				return false;	
			}
			if (rep_password == null || rep_password == ""){
				alert("重复密码不能为空");
				return false;
			}
			/*
			if (email == null || email == ""){
				alert("邮箱不能为空");
				return false;
			}

			if (phone == null || phone == ""){
				alert("手机不能为空");
				return false;
			}
			var phone_reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
			if (!phone_reg.test(phone)){
				alert("请输入有效的手机号");
				return false;
			}
			var atpos=email.indexOf("@");
			var dotpos=email.lastIndexOf(".");
			if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
			  alert("请输入有效的邮箱地址");
			  return false;
			}*/
			if (password != rep_password){
				alert("密码不匹配");
				return false;
			}
			return true;
		}
		function reset() {
			$('#username').val('');
			$('#password').val('');
			$('#rep_password').val('');
			/*
			$('#email').val('');
			$('#phone').val('');
			*/
		}
	</script>
</head>

<body >
<body class="Grid">
<div class="ui fixed transparent inverted main menu">
    <div class="container">
        <div class="title item">
            <b>ChatRoom</b> 在线聊天系统
        </div>

        <div class="right menu">
            <div class="title item">
                <b>
                <a  href="/login" title="返回登录">
                	返回登录
                </a>
                </b>
            </div>
        </div>

	</div>
</div>
{%if not Error%}
 <div id="wrapper" style="display: block; z-index: 998;">
    <div class="container">
        <div id="login" class="ui two column relaxed grid">
            <div class="column">
                <div class="ui fluid form segment">
                    <h3 class="ui header">注册</h3>
						<form name="registerForm"  action="" onsubmit="return vaildateForm();
						"onreset="reset()" method="post">
							<div class="field">
                        		<label>用户名</label>
                        		<input name="username" id="username" placeholder="用户名" type="text">
                    		</div>
							<div class="field">
                        		<label>密码</label>
                        		<input name="password" id="password" type="password">
                    		</div>
							<div class="field">
                        		<label>重复密码</label>
                        		<input name="rep_password" id="rep_password" type="password">
                    		</div>
							<div class="inline field">
		                        <div class="ui checkbox">
		                            <input type="checkbox" id="terms">
		                            <label for="terms">我同意ChatRoom的服务条款。</label>
		                        </div>
                    		</div>
							<input type="submit" value="提交" id="submit" class="ui blue login_submit button">
							&nbsp &nbsp &nbsp
							<input type="reset"  value="重置" id="reset" class="ui blue login_submit button">
                  		</form>
				</div>
    		</div>
		</div>
	</div>
</div>
{%else%}
 <div id="wrapper" style="display: block; z-index: 998;">
    <div class="container">
        <div id="login" class="ui two column relaxed grid">
            <div class="column">
                <div class="ui fluid form segment">
                    <h3 class="ui header" color="red" style="color: red;">注册失败</h3>
                        <h3><b>用户名重复</b></h3>
                        <a href='/register'> 重新注册 </a>
                </div>
            </div>
        </div>
    </div>
 </div>
{%end%}
</body>
<html>
